<template>
    <div class="child-component">
        <childComponent>
            <template #user="scope">
                <div>这是具名插槽，{{ scope.content }}</div>
            </template>
            <template #vip="{ content }">
                <div>这是具名插槽，{{ content }}</div>
            </template>
        </childComponent>
    </div>
</template>

<script setup lang="jsx">
import { useSlots } from 'vue';

const childComponent = () => {
    const slots = useSlots();
    const options = {
        id: 1,
        content: '这是子组件中的内容',
    }

    const otherOptions = {
        id: 2,
        content: '这是子组件中其他的内容',
    }
    return (
        <>
            <div>这是子组件</div>
            <div>{slots.user ? slots.user(options) : '具名插槽user'}</div>
            <div>{slots.vip ? slots.vip(otherOptions) : '具名插槽vip'}</div>
        </>
    )
}
</script>